'use client';

import Head from 'next/head';
import { BytemdViewer } from '@/components/bytemd';
import { Wrapper } from '@/components/wrapper';
import Back from '@/components/back';
import type { PrivacyPolicy } from '../config';

type PrivacyPolicyDetailProps = {
    policy: PrivacyPolicy;
};

export const PrivacyPolicyDetailPage = ({ policy }: PrivacyPolicyDetailProps) => {
    return (
        <div className="min-h-screen">
            <Wrapper className="flex flex-col overflow-x-hidden">
                <Back text="返回列表" href="/pd-privacy" />

                <Head>
                    <title>{policy.name} - 隐私政策</title>
                    {policy.description && <meta name="description" content={policy.description} />}
                    <link rel="canonical" href={`/pd-privacy/${policy.slug}`} />
                </Head>

                {/* <div className="flex items-center space-x-4 pb-4 pt-8 text-sm text-muted-foreground">
                    {policy.updatedAt && <p>更新时间：{policy.updatedAt}</p>}
                </div> */}

                <h1 className="break-all py-6 text-2xl md:text-4xl font-semibold">
                    {policy.name}
                </h1>

                {/* 内容 */}
                <div className="prose dark:prose-invert max-w-none mt-3">
                    {policy.content ? (
                        <BytemdViewer body={policy.content} />
                    ) : (
                        <div className="flex items-center justify-center w-full h-full">
                            <div className="flex justify-center items-center space-x-1 text-base text-[#737373]">
                                <svg
                                    fill="none"
                                    className="w-6 h-6 animate-spin"
                                    viewBox="0 0 32 32"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        clipRule="evenodd"
                                        d="M15.165 8.53a.5.5 0 01-.404.58A7 7 0 1023 16a.5.5 0 011 0 8 8 0 11-9.416-7.874.5.5 0 01.58.404z"
                                        fill="currentColor"
                                        fillRule="evenodd"
                                    />
                                </svg>
                                <div>加载中 ...</div>
                            </div>
                        </div>
                    )}
                </div>

                <div className="pb-24 mt-16">
                    <Back text="返回列表" href="/pd-privacy" />
                </div>
            </Wrapper>
        </div>
    );
};
